<html>
<head>
<title>day16-作业-和机器人对话.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #faa23d;}
.s2 { color: #aa7dfc;}
.s3 { color: #e2da90;}
.s4 { color: #b3e54c;}
.s5 { color: #52cb54;}
.s6 { color: #db7e9b;}
.s7 { color: #bbb529;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
day16-作业-和机器人对话.ets</font>
</center></td></tr></table>
<pre><span class="s0">import </span><span class="s1">{ </span><span class="s0">http </span><span class="s1">} </span><span class="s0">from </span><span class="s2">'@kit.NetworkKit'</span>
<span class="s0">import </span><span class="s1">{ </span><span class="s0">promptAction </span><span class="s1">} </span><span class="s0">from </span><span class="s2">'@kit.ArkUI'</span>

<span class="s0">export class ResultClass </span><span class="s1">{</span>
  <span class="s0">result</span><span class="s3">: </span><span class="s0">number </span><span class="s3">= </span><span class="s4">0</span>
  <span class="s0">content</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s2">&quot;&quot;</span>
<span class="s1">}</span>

<span class="s0">export class MessageItem </span><span class="s1">{</span>
  <span class="s0">message</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s2">&quot;&quot; </span><span class="s5">// 用户名称</span>
  <span class="s0">self</span><span class="s3">: </span><span class="s0">boolean </span><span class="s3">= </span><span class="s0">false </span><span class="s5">// 是不是用户自己</span>
  <span class="s0">id</span><span class="s3">: </span><span class="s0">number </span><span class="s3">= </span><span class="s4">0 </span><span class="s5">// 唯一的id</span>
<span class="s1">}</span>

<span class="s0">export interface IMessRes </span><span class="s1">{</span>
  <span class="s5">/** 
   * 响应数据 
   */</span>
  <span class="s0">data</span><span class="s3">: </span><span class="s0">Data</span><span class="s3">;</span>

  <span class="s5">/** 
   * 响应消息 
   */</span>
  <span class="s0">message</span><span class="s3">: </span><span class="s0">string</span><span class="s3">;</span>
<span class="s1">}</span>

<span class="s5">/** 
 * 响应数据 
 */</span>
<span class="s0">export interface Data </span><span class="s1">{</span>
  <span class="s5">/** 
   * 响应对象 
   */</span>
  <span class="s0">info</span><span class="s3">: </span><span class="s0">Info</span><span class="s3">;</span>

  <span class="s5">/** 
   * 响应数据类型 
   */</span>
  <span class="s0">type</span><span class="s3">: </span><span class="s0">number</span><span class="s3">;</span>
<span class="s1">}</span>

<span class="s5">/** 
 * 响应对象 
 */</span>
<span class="s0">export interface Info </span><span class="s1">{</span>
  <span class="s5">/** 
   * 机器人返回的话语 
   */</span>
  <span class="s0">text</span><span class="s3">: </span><span class="s0">string</span><span class="s3">;</span>
<span class="s1">}</span>

<span class="s0">PersistentStorage</span><span class="s3">.</span><span class="s0">persistProp</span><span class="s6">(</span><span class="s2">'messList'</span><span class="s3">, </span><span class="s6">[</span><span class="s1">{</span>
  <span class="s0">id</span><span class="s3">: </span><span class="s4">1</span><span class="s3">,</span>
  <span class="s0">self</span><span class="s3">: </span><span class="s0">false</span><span class="s3">,</span>
  <span class="s0">message</span><span class="s3">: </span><span class="s2">'您好~，知心姐姐已上线'</span>
<span class="s1">}</span><span class="s6">])</span>

<span class="s7">@</span><span class="s0">Entry</span>
<span class="s7">@</span><span class="s0">Component</span>
<span class="s0">struct ChatMessage </span><span class="s1">{</span>
  <span class="s7">@</span><span class="s0">State</span>
  <span class="s0">contentStr</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s2">&quot;&quot;</span>
  <span class="s7">@</span><span class="s0">StorageLink</span><span class="s6">(</span><span class="s2">'messList'</span><span class="s6">)</span>
  <span class="s0">messList</span><span class="s3">: </span><span class="s0">MessageItem</span><span class="s6">[] </span><span class="s3">= </span><span class="s6">[]</span>

  <span class="s0">build</span><span class="s6">() </span><span class="s1">{</span>
    <span class="s0">Stack</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">alignContent</span><span class="s3">: </span><span class="s0">Alignment</span><span class="s3">.</span><span class="s0">Bottom </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
      <span class="s0">Column</span><span class="s6">() </span><span class="s1">{</span>
        <span class="s0">Row</span><span class="s6">() </span><span class="s1">{</span>
          <span class="s0">Text</span><span class="s6">(</span><span class="s2">&quot;🙉 知心姐姐&quot;</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">fontSize</span><span class="s6">(</span><span class="s4">18</span><span class="s6">)</span>
        <span class="s1">}</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s6">(</span><span class="s2">'100%'</span><span class="s6">)</span>
        <span class="s3">.</span><span class="s0">height</span><span class="s6">(</span><span class="s4">50</span><span class="s6">)</span>
        <span class="s3">.</span><span class="s0">justifyContent</span><span class="s6">(</span><span class="s0">FlexAlign</span><span class="s3">.</span><span class="s0">Center</span><span class="s6">)</span>

        <span class="s0">List</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s4">20 </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
          <span class="s0">ForEach</span><span class="s6">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">messList</span><span class="s3">, </span><span class="s6">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">MessageItem</span><span class="s6">) </span><span class="s3">=&gt; </span><span class="s1">{</span>
            <span class="s0">ListItem</span><span class="s6">() </span><span class="s1">{</span>
              <span class="s5">// 一左一右</span>
              <span class="s0">MessageCom</span><span class="s6">(</span><span class="s1">{</span>
                <span class="s0">item</span><span class="s3">: </span><span class="s0">item</span>
              <span class="s1">}</span><span class="s6">)</span>
            <span class="s1">}</span>
          <span class="s1">}</span><span class="s6">)</span>
        <span class="s1">}</span>
        <span class="s3">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s1">{</span>
          <span class="s0">bottom</span><span class="s3">: </span><span class="s4">80</span>
        <span class="s1">}</span><span class="s6">)</span>
        <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s6">(</span><span class="s4">1</span><span class="s6">)</span>
      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">height</span><span class="s6">(</span><span class="s2">'100%'</span><span class="s6">)</span>

      <span class="s5">// 消息列表</span>
      <span class="s0">Row</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s4">20 </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
        <span class="s0">TextInput</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">text</span><span class="s3">: </span><span class="s0">$$this</span><span class="s3">.</span><span class="s0">contentStr </span><span class="s1">}</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s6">(</span><span class="s4">1</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s3">.</span><span class="s0">White</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">borderRadius</span><span class="s6">(</span><span class="s4">2</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">height</span><span class="s6">(</span><span class="s4">40</span><span class="s6">)</span>

        <span class="s0">Button</span><span class="s6">() </span><span class="s1">{</span>
          <span class="s0">Row</span><span class="s6">() </span><span class="s1">{</span>
            <span class="s0">Text</span><span class="s6">(</span><span class="s2">&quot;发送&quot;</span><span class="s6">)</span>
              <span class="s3">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s2">&quot;#fff&quot;</span><span class="s6">)</span>
          <span class="s1">}</span>

        <span class="s1">}</span>
        <span class="s3">.</span><span class="s0">height</span><span class="s6">(</span><span class="s4">30</span><span class="s6">)</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s6">(</span><span class="s4">60</span><span class="s6">)</span>
        <span class="s3">.</span><span class="s0">onClick</span><span class="s6">(() </span><span class="s3">=&gt; </span><span class="s1">{</span>
          <span class="s0">if </span><span class="s6">(</span><span class="s3">!</span><span class="s0">this</span><span class="s3">.</span><span class="s0">contentStr</span><span class="s3">.</span><span class="s0">trim</span><span class="s6">()) </span><span class="s1">{</span>
            <span class="s0">promptAction</span><span class="s3">.</span><span class="s0">showToast</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">message</span><span class="s3">: </span><span class="s2">'信息不能为空' </span><span class="s1">}</span><span class="s6">)</span>
            <span class="s0">return</span>
          <span class="s1">}</span>
          <span class="s0">this</span><span class="s3">.</span><span class="s0">messList</span><span class="s3">.</span><span class="s0">push</span><span class="s6">(</span><span class="s1">{</span>
            <span class="s0">message</span><span class="s3">: </span><span class="s0">this</span><span class="s3">.</span><span class="s0">contentStr</span><span class="s3">,</span>
            <span class="s0">self</span><span class="s3">: </span><span class="s0">true</span><span class="s3">,</span>
            <span class="s0">id</span><span class="s3">: </span><span class="s0">Date</span><span class="s3">.</span><span class="s0">now</span><span class="s6">()</span>
          <span class="s1">}</span><span class="s6">)</span>
          <span class="s0">const req </span><span class="s3">= </span><span class="s0">http</span><span class="s3">.</span><span class="s0">createHttp</span><span class="s6">()</span>
          <span class="s0">req</span><span class="s3">.</span><span class="s0">request</span><span class="s6">(</span><span class="s2">`https://hmajax.itheima.net/api/robot?spoken=</span><span class="s1">${</span><span class="s0">this</span><span class="s3">.</span><span class="s0">contentStr</span><span class="s1">}</span><span class="s2">`</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">then</span><span class="s6">((</span><span class="s0">res</span><span class="s6">) </span><span class="s3">=&gt; </span><span class="s1">{</span>
              <span class="s0">const result </span><span class="s3">= </span><span class="s0">JSON</span><span class="s3">.</span><span class="s0">parse</span><span class="s6">(</span><span class="s0">res</span><span class="s3">.</span><span class="s0">result as string</span><span class="s6">) </span><span class="s0">as IMessRes</span>
              <span class="s0">this</span><span class="s3">.</span><span class="s0">messList</span><span class="s3">.</span><span class="s0">push</span><span class="s6">(</span><span class="s1">{</span>
                <span class="s0">message</span><span class="s3">: </span><span class="s0">result</span><span class="s3">.</span><span class="s0">data</span><span class="s3">.</span><span class="s0">info</span><span class="s3">.</span><span class="s0">text</span><span class="s3">,</span>
                <span class="s0">self</span><span class="s3">: </span><span class="s0">false</span><span class="s3">,</span>
                <span class="s0">id</span><span class="s3">: </span><span class="s0">Date</span><span class="s3">.</span><span class="s0">now</span><span class="s6">()</span>
              <span class="s1">}</span><span class="s6">)</span>
            <span class="s1">}</span><span class="s6">)</span>
          <span class="s0">this</span><span class="s3">.</span><span class="s0">contentStr </span><span class="s3">= </span><span class="s2">''</span>
        <span class="s1">}</span><span class="s6">)</span>

      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">width</span><span class="s6">(</span><span class="s2">'100%'</span><span class="s6">)</span>
      <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s2">'#f6f6f6'</span><span class="s6">)</span>
      <span class="s3">.</span><span class="s0">height</span><span class="s6">(</span><span class="s4">70</span><span class="s6">)</span>
      <span class="s3">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s1">{</span>
        <span class="s0">left</span><span class="s3">: </span><span class="s4">10</span><span class="s3">,</span>
        <span class="s0">right</span><span class="s3">: </span><span class="s4">10</span>
      <span class="s1">}</span><span class="s6">)</span>
    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s2">'#ededed'</span><span class="s6">)</span>
    <span class="s3">.</span><span class="s0">height</span><span class="s6">(</span><span class="s2">'100%'</span><span class="s6">)</span>
  <span class="s1">}</span>
<span class="s1">}</span>

<span class="s7">@</span><span class="s0">Component</span>
<span class="s0">struct MessageCom </span><span class="s1">{</span>
  <span class="s0">item</span><span class="s3">: </span><span class="s0">Partial</span><span class="s3">&lt;</span><span class="s0">MessageItem</span><span class="s3">&gt; = </span><span class="s1">{}</span>
  <span class="s7">@</span><span class="s0">State</span>
  <span class="s0">showMenu</span><span class="s3">: </span><span class="s0">boolean </span><span class="s3">= </span><span class="s0">false</span>

  <span class="s0">build</span><span class="s6">() </span><span class="s1">{</span>
    <span class="s0">Row</span><span class="s6">() </span><span class="s1">{</span>
      <span class="s0">Image</span><span class="s6">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">item</span><span class="s3">.</span><span class="s0">self </span><span class="s3">? </span><span class="s0">$r</span><span class="s6">(</span><span class="s2">'app.media.ic_public_male'</span><span class="s6">) </span><span class="s3">: </span><span class="s0">$r</span><span class="s6">(</span><span class="s2">'app.media.ic_public_female'</span><span class="s6">))</span>
        <span class="s3">.</span><span class="s0">height</span><span class="s6">(</span><span class="s4">40</span><span class="s6">)</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s6">(</span><span class="s4">40</span><span class="s6">)</span>
        <span class="s3">.</span><span class="s0">borderRadius</span><span class="s6">(</span><span class="s4">6</span><span class="s6">)</span>
      <span class="s0">Row</span><span class="s6">() </span><span class="s1">{</span>
        <span class="s0">Text</span><span class="s6">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">item</span><span class="s3">.</span><span class="s0">message</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">item</span><span class="s3">.</span><span class="s0">self </span><span class="s3">? </span><span class="s2">&quot;#8bec73&quot; </span><span class="s3">: </span><span class="s0">Color</span><span class="s3">.</span><span class="s0">White</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">fontColor</span><span class="s6">(</span><span class="s2">&quot;#0c2803&quot;</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s4">10</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">lineHeight</span><span class="s6">(</span><span class="s4">24</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">margin</span><span class="s6">(</span><span class="s1">{</span>
            <span class="s0">left</span><span class="s3">: </span><span class="s4">10</span><span class="s3">,</span>
            <span class="s0">right</span><span class="s3">: </span><span class="s4">10</span>
          <span class="s1">}</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">borderRadius</span><span class="s6">(</span><span class="s4">5</span><span class="s6">)</span>


      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s6">(</span><span class="s4">5</span><span class="s6">)</span>
      <span class="s3">.</span><span class="s0">justifyContent</span><span class="s6">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">item</span><span class="s3">.</span><span class="s0">self </span><span class="s3">? </span><span class="s0">FlexAlign</span><span class="s3">.</span><span class="s0">End </span><span class="s3">: </span><span class="s0">FlexAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s6">)</span>

      <span class="s0">Text</span><span class="s6">()</span>
        <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s6">(</span><span class="s4">1</span><span class="s6">)</span>
    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">width</span><span class="s6">(</span><span class="s2">'100%'</span><span class="s6">)</span>
    <span class="s3">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s1">{</span>
      <span class="s0">left</span><span class="s3">: </span><span class="s4">20</span><span class="s3">,</span>
      <span class="s0">right</span><span class="s3">: </span><span class="s4">20</span>
    <span class="s1">}</span><span class="s6">)</span>
    <span class="s3">.</span><span class="s0">alignItems</span><span class="s6">(</span><span class="s0">VerticalAlign</span><span class="s3">.</span><span class="s0">Top</span><span class="s6">)</span>
    <span class="s3">.</span><span class="s0">direction</span><span class="s6">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">item</span><span class="s3">.</span><span class="s0">self </span><span class="s3">? </span><span class="s0">Direction</span><span class="s3">.</span><span class="s0">Rtl </span><span class="s3">: </span><span class="s0">Direction</span><span class="s3">.</span><span class="s0">Ltr</span><span class="s6">)</span>
  <span class="s1">}</span>
<span class="s1">}</span>




</pre>
</body>
</html>